﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Rows Selection Modes in jqxDataTable. Select multiple rows by holding Shift or Ctrl and clicking on a row.</title>
    <meta name="description" content="This sample demonstrates how we can set up the DataTable plug-in with Single Row or Multiple Row selection modes and how to use the DataTable's Selection API." /> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../sampledata/generatedata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxDataTable.
            $("#table").jqxDataTable(
            {
                width: 650,
                altrows: true,
                columns: [
                  { text: 'First Name', dataField: 'First Name', width: 200 },
                  { text: 'Last Name', dataField: 'Last Name', width: 200 },
                  { text: 'Product', dataField: 'Product', width: 180 },
                  { text: 'Unit Price', dataField: 'Price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
                  { text: 'Quantity', dataField: 'Quantity', width: 80, align: 'right', cellsAlign: 'right' }
                ]
            });
            // create jqxInput.
            $("#rowInput").jqxInput({ height: 30, width: 60 });
            // create jqxButton.
            $("#rowSelect").jqxButton({ height: 30, width: 60 });
            $("#clearSelection").jqxButton({ height: 30 });
            // create jqxDropDownList.
            $("#selectionMode").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 1, source: ['Single Row', 'Multiple Rows'], height: 30 });
            $("#selectionMode").on('change', function (event) {
                switch (event.args.index) {
                    case 0:
                        // disable multiple rows selection with Shift or Ctrl.
                        $("#table").jqxDataTable({ 'selectionMode': 'singleRow' });
                        break;
                    case 1:
                        // enable multiple rows selection with Shift or Ctrl.
                        $("#table").jqxDataTable({ 'selectionMode': 'multipleRows' });
                        break;
                }
            });

            // selects a row by index.
            $("#rowSelect").click(function () {
                var index = parseInt($("#rowInput").val());
                $("#table").jqxDataTable('selectRow', index);
            });

            // clear selection.
            $("#clearSelection").click(function () {
                $("#table").jqxDataTable('clearSelection');
            });

            var selectionInfo = function () {
                // gets selected row indexes. The method returns an Array of indexes.
                var selection = $("#table").jqxDataTable('getSelection');
                var selectedRows = "<br/>Selected Row Indexes:<br/>";
                if (selection && selection.length > 0) {
                    var rows = $("#table").jqxDataTable('getRows');
                    for (var i = 0; i < selection.length; i++) {
                        var rowData = selection[i];
                        selectedRows += rows.indexOf(rowData);
                        if (i < selection.length - 1) {
                            selectedRows += ", ";
                        }
                        if (i > 1 && i % 8 === 0) {
                            selectedRows += "<br/>";
                        }
                    }
                    $("#selectedRows").html(selectedRows);
                }
                else $("#selectedRows").html(selectedRows);
            }

            $("#table").on('rowSelect', function (event) {
                // event arguments
                var args = event.args;
                // row index
                var index = args.index;
                // row data
                var rowData = args.row;
                // row key
                var rowKey = args.key;
                selectionInfo();
            });

            $("#table").on('rowUnselect', function (event) {
                // event arguments
                var args = event.args;
                // row index
                var index = args.index;
                // row data
                var rowData = args.row;
                // row key
                var rowKey = args.key;
                selectionInfo();
            });
        });
    </script>
</head>
<body class='default'>
    <div style="float: left;">
        <table id="table" border="1">
            <thead>
                <tr>
                    <th align="left">First Name</th>
                    <th align="left">Last Name</th>
                    <th align="left">Product</th>
                    <th align="right">Price</th>
                    <th align="right">Quantity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ian</td>
                    <td>Devling</td>
                    <td>Espresso Truffle</td>
                    <td>$1.75</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>Nancy</td>
                    <td>Wilson</td>
                    <td>Cappuccino</td>
                    <td>$5.00</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>Cheryl</td>
                    <td>Nodier</td>
                    <td>Caffe Americano</td>
                    <td>$2.50</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Martin</td>
                    <td>Saavedra</td>
                    <td>Caramel Latte</td>
                    <td>$3.80</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>Guylene</td>
                    <td>Bjorn</td>
                    <td>Green Tea</td>
                    <td>$1.50</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>Andrew</td>
                    <td>Burke</td>
                    <td>Caffe Espresso</td>
                    <td>$3.00</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Regina</td>
                    <td>Murphy</td>
                    <td>White Chocolate Mocha</td>
                    <td>$3.60</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>Michael</td>
                    <td>Murphy</td>
                    <td>Caramel Latte</td>
                    <td>$3.80</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Petra</td>
                    <td>Bein</td>
                    <td>Caffe Americano</td>
                    <td>$2.50</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>Nancy</td>
                    <td>Nodier</td>
                    <td>Caffe Latte</td>
                    <td>$4.50</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Peter</td>
                    <td>Devling</td>
                    <td>Green Tea</td>
                    <td>$1.50</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Beate</td>
                    <td>Saylor</td>
                    <td>Espresso con Panna</td>
                    <td>$3.25</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>Shelley</td>
                    <td>Nodier</td>
                    <td>Peppermint Mocha Twist</td>
                    <td>$4.00</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>Nancy</td>
                    <td>Murphy</td>
                    <td>Peppermint Mocha Twist</td>
                    <td>$4.00</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Lars</td>
                    <td>Wilson</td>
                    <td>Caffe Espresso</td>
                    <td>$3.00</td>
                    <td>11</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div style="float: left; margin-left: 10px;">
        <div><strong>Settings</strong></div>
        Select Row:
        <input value="0" id="rowInput" />
        <br />
        <br />
        <button id="rowSelect">Select</button>
        <button id="clearSelection">Clear Selection</button>
        <div id="selectedRows"></div>
        <br />
        Selection Mode:
         <div id="selectionMode"></div>
    </div>
</body>
</html>
